<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改电子名片功能开关配置')"/>
    <th:block th:include="include :: cropper-css"/>
    <style type="text/css">
        .imageBox2 {
            border: 1px solid #aaa;
            overflow: hidden;
            cursor: move;
            box-shadow: 4px 4px 12px #B0B0B0;
            margin: 0px auto;
        }

        .btn-custom2 {
            float: right;
            width: 46px;
            display: inline-block;
            margin-bottom: 10px;
            height: 37px;
            line-height: 37px;
            font-size: 14px;
            color: #FFFFFF;
            margin: 0px 2px;
            background-color: #f38e81;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0px 0px 5px #B0B0B0;
            border: 0px #fff solid;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-module-edit" th:object="${ecardModuleInfo}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">独立法人机构：</label>
            <div class="col-sm-9">
                <select name="deptId" class="form-control m-b" th:with="type=${@dept.selectDeptListByTypeAndDict('2')}"
                        disabled>
                    <option th:each="dept : ${type}" th:text="${dept.deptName}" th:value="${dept.deptId}"
                            th:field="*{deptId}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">功能名称：</label>
            <div class="col-sm-9">
                <select id="moduleCode" name="moduleCode" class="form-control m-b"
                        th:with="type=${@dict.getType('ecard_module_type')}" disabled>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{moduleCode}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">功能类型：</label>
            <div class="col-sm-9">
                <select id="abilityType" name="abilityType" class="form-control m-b"
                        th:with="type=${@dict.getType('ecard_ability_type')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{abilityType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">功能跳转类型：</label>
            <div class="col-sm-9">
                <select id="jumpType" name="jumpType" class="form-control m-b"
                        th:with="type=${@dict.getType('ecard_jump_type')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{jumpType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">功能跳转内容：</label>
            <div class="col-sm-9">
                <input name="jumpContent" class="form-control" type="text" th:field="*{jumpContent}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">功能LOGO：
                <br><span style="color: red">(120px*120px)</span>
            </label>
            <div class="col-sm-9">
                <input type="hidden" name="moduleLogo" id="moduleLogo" th:field="*{moduleLogo}">
                <div class="imageBox">
                    <img id="moduleLogoImage"
                         th:src="(${#strings.isEmpty(ecardModuleInfo.moduleLogo)}) ? @{/img/default.png} : @{${ecardModuleInfo.moduleLogo}}"
                         th:onerror="'this.src=\'' + @{'/img/default.png'} + '\''">
                </div>
                <div class="action">
                    <div class="new-contentarea tc">
                        <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label>
                        </a>
                        <input type="file" name="inputImage" id="inputImage" accept="image/*"/>
                    </div>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i
                            class="fa fa-search-plus"></i></button>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i
                            class="fa fa-search-minus"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i
                            class="fa fa-rotate-left"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i
                            class="fa fa-rotate-right"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i
                            class="fa fa-arrows-h"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i
                            class="fa fa-arrows-v"></i></button>
                    <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">功能排序：</label>
            <div class="col-sm-9">
                <input name="moduleSort" class="form-control" type="text" th:field="*{moduleSort}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">状态：</label>
            <div class="col-sm-9">
                <select name="state" class="form-control m-b" th:with="type=${@dict.getType('sys_sts')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{state}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-9">
                <input name="remark" class="form-control" type="text" th:field="*{remark}">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: cropper-js"/>
<script th:inline="javascript">
    var prefix = ctx + "ecard/config/module";
    $("#form-module-edit").validate({
        focusCleanup: true
    });
    var cropper;
    var croppable = false;
    $(window).on('load', function () {
        //logo
        var image = document.getElementById('moduleLogoImage');
        cropper = new Cropper(image, {
            aspectRatio: 1,//设置宽高比例
            viewMode: 1,
            autoCropArea: 1,
            //preview: '.img-preview',
            ready: function () {
                croppable = true;
            }
        })

        $('#inputImage').on('change', function () {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                reader.onload = function (e) {
                    if (croppable) {
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                $.modal.alertWarning('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click', function (e) {
            if (!croppable) {
                $.modal.alertWarning("裁剪框加载中,请稍候...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if (['scaleX', 'scaleY'].indexOf(data.method) !== -1) {
                $(this).data('option', -data.option)
            }
        })
    });
    //设置裁剪高度
    $(window).resize(function () {
        $('.imageBox').height("120px");
        $('.cropped').height("120px");
    }).resize();
    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function (callback, type, quality) {
                var canvas = this;
                setTimeout(function () {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }

    function submitHandler() {
        if (!croppable) {
            $.modal.alertWarning("裁剪框加载中,请稍候...");
            return;
        }
        if ($.validate.form()) {
            cropper.getCroppedCanvas().toBlob(function (img) {
                var formdata = new FormData();
                formdata.append("file", img);
                formdata.append("fileType", "/ecard/module");
                $.ajax({
                    url: ctx + "common/uploadCropperImage",
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        $("#moduleLogo").val(result.data.fileUrl)
                        $.operate.save(prefix + "/edit", $('#form-module-edit').serialize());
                    }
                })
            });
        }
    }
</script>
</body>
</html>